<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-alert type="warning" title="有道翻译：https://fanyi.youdao.com/openapi" :closable="false" show-icon />
		</el-card>
		<el-card shadow="never" class="!border-none">
			<el-form ref="formRef" class="ls-form" label-position="top">
				<el-form-item label="应用ID" prop="appKey">
					<div class="w-80">
						<el-input v-model.trim="translationData.app_key" placeholder="请输入应用ID"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="应用密钥" prop="sec_key">
					<div class="w-80">
						<el-input v-model.trim="translationData.sec_key" placeholder="请输入应用密钥"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="接口地址" prop="url">
					<div class="w-80">
						<el-input v-model.trim="translationData.url" placeholder="请输入接口地址"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="自动翻译" prop="auto">
					<div>
						<el-switch v-model="translationData.auto" :active-value="'1'" :inactive-value="'0'" />
						<span class="mt-1 ml-2">
							{{ translationData.auto=='1' ? '开启' : '关闭' }}
						</span>
					</div>
				</el-form-item>
			</el-form>
		</el-card>

		<footer-btns v-perms="['setting.web.web_setting/setWebsite']">
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="dictType">
	import { isEmpty } from 'lodash-es';
	import { getWebsiteProject, setWebsiteProject } from '@/api/setting/website'

	const name = ref('translation')

	// 表单数据
	const translationData = reactive({
		app_key: "",
		sec_key: "",
		url: "",
		auto: "0"
	})
	const handleSubmit = async () => {
		await setWebsiteProject({ name: name.value, content: translationData })
		getData()
	}

	const getData = async () => {
		const data = await getWebsiteProject({ name: name.value })
		if (!isEmpty(data.data)) {
			for (const key in translationData) {
				if (data.data[key] != null && data.data[key] != undefined) {
					//@ts-ignore
					translationData[key] = data.data[key]
				}
			}
		}
	}

	getData()
</script>

<style lang="scss" scoped></style>